﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="interactivedetail.aspx.cs"
    Inherits="interactivedetail" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>发现你身边的英国元素</title>
    <!-- #include file="/include/tag/cn_cssjs.html" -->
    <script src="/js/Warmup.js" type="text/javascript"></script>
    <script type="text/javascript">

        var g_langID = "2052";
        var url = window.location.href;
        var title = '艺述英国';
        var g_pic = null;

        $(document).ready(function () {
            getWarmup();
            getWarmupComments(0);
        });

        function share_sina() {
            sharesina(title, g_pic, url);
        }

        function share_kaixin() {
            sharekaixin001(title, url, g_pic, null);
        }
        function share_douban() {
            sharedouban(title, url, g_pic, null);
        }
        function share_qq() {
            shareqq(title, url, g_pic, null);
        }
        function share_ren() {
            sharerenren(title, url, g_pic, url);
        }

        // 请求作品数据
        function getWarmup() {
       
            var url = '/XmlHttpGate.aspx?cmd=1&langID=' + g_langID + '&wid=<%=Request["wid"] %>&random=' + new Date().toLocaleString();
            jQuery.ajax({
                url: url,
                dataType: 'json',
                success: function (data) { showWarmup(data); }
            });
        }
        // 显示作品信息
        function showWarmup(model) {
            if (model != null) {
                $('#w_desc').html(model.Description); //作品描述
                if (model.Author!=null) {
                    $('#w_author').html(model.Author.Name); //作者

                    if (model.Author.MemberImg != null) {
                        $('#w_author_img').attr("src", "/uploadfiles/image/" + model.Author.MemberImg); //作者头像
                    }
                    else {
                        $('#w_author_img').attr("src", "/uploadfiles/image/userhead_img.jpg"); //作者默认头像
                    }

                }
                
                if (model.ImagePath != null || model.ImagePath != '') {
                    g_pic = "http://www.uknow.org.cn/uploadfiles/image/" + model.ImagePath;


                    $('#w_warmImg').attr("src", "/uploadfiles/image/" + model.ImagePath);''

                    $('#w_pop_img').attr("src", "/uploadfiles/image/" + model.ImagePath.replace("Big", "Earliest")); // 作品浮层图片
                }
                $('#w_comment_votes').html(model.VoteCount); // 投票数
            }
            else {
                window.location.href = "interactivespace.aspx";

            }


        }
        //投票
        function setVote(id) {
            //alert('1');
            // $('#w_comment_votes').text = doVote().VoteCount;
            doVote(id);
            alert("投票成功！")
            getWarmup();
        }
        ///////////////

        // 请求作品评论数据
        function getWarmupComments(pageIndex) {
            //alert(pageIndex);
            var url = '/XmlHttpGate.aspx?cmd=2&langID=' + g_langID + '&wid=<%=Request["wid"] %>&random=' + new Date().toLocaleString() + "&pageIndex=" + pageIndex;
            jQuery.ajax({
                url: url,
                dataType: 'json',
                success: function (data) { showWarmupComments(data, pageIndex); }
            });
        }

        // 显示作品评论信息
        function showWarmupComments(pagingList, pageIndex) {
            $('#ul_w_comments').html("");

            var totalCount = pagingList.Capacity;
            var length = pagingList.List.length;
            for (var i = 0; i < length; i++) {
                var detail = getCommentDetail(pagingList.List[i]);
                $('#ul_w_comments').append(detail);
            }

            $('#w_comment_pagesize').html("");
            var pageSize;

            if (totalCount % 5 == 0)
                pageSize = Math.floor(totalCount / 5);
            else
                pageSize = Math.floor(totalCount / 5) + 1;
            //alert(pageSize);
            var prevPageIndex = (pageIndex == 0) ? 0 : pageIndex - 1;
            var nextPageIndex = (pageIndex < pageSize-1) ? pageIndex + 1 : pageIndex;

            if (totalCount>0) {
            var li_pre = $('<li></li>');
            var a_pre = $("<a href='javascript:void(0);' style='cursor:hand' onclick='javascript:getWarmupComments(" + prevPageIndex + ");'></a>");
            li_pre.append(a_pre);
            var img_pre = $('<img src="images/icon_comment_pre.gif" alt="" />');
            a_pre.append(img_pre);
            $('#w_comment_pagesize').append(li_pre);

            for (var j = 0; j < pageSize; j++) {
                var li = $('<li></li>');
                if (pageIndex != j) {
                    var a = $("<a href='javascript:void(0);' onclick='javascript:getWarmupComments(" + j + ");'></a>");
                    a.attr('style', 'cursor:pointer');
                    a.html(j+1);
                    li.append(a);
                }
                else {
                    li.html(j + 1);
                }
                $('#w_comment_pagesize').append(li);
            }
            var li_next = $('<li></li>');
            var a_next = $("<a style='cursor:hand' onclick='javascript:getWarmupComments(" + nextPageIndex + ");'></a>");
            li_next.append(a_next);
            var img_next = $('<img src="images/icon_comment_next.gif" alt="" />');
            a_next.append(img_next);

            $('#w_comment_pagesize').append(li_next);
            }

            //            <li><a href="#"><img src="images/icon_comment_pre.gif" alt="" /></a></li>
            //                                <li><a href="#">1</a></li>
            //                                <li><a href="#">2</a></li>
            //                                <li><a href="#">3</a></li>
            //                                <li><a href="#">4</a></li>
            //                                <li><a href="#">5</a></li>
            //             <li><a href="#"><img src="images/icon_comment_next.gif" alt="" /></a></li>
        }
        function renderTime(data) {
            if (data == null || typeof data == "undefined") return "";
            var date = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var s = currentDate + "/" + month + "/" + date.getFullYear();
            if (date.getHours() == 0 && date.getMinutes() == 0)
                return s;
            else
                return s + " " + date.getHours() + ":" + date.getMinutes();
        }

        function getCommentDetail(comment) {
            var img = $("<img width='30' height='30'/>");
            if (comment.Commenter != null) {
                if (comment.Commenter.MemberImg != null && comment.Commenter.MemberImg!=".jpg")
                    img.attr("src", "/uploadfiles/image/" + comment.Commenter.MemberImg);
                else {
                    img.attr("src", "/uploadfiles/image/userhead_img.jpg");
                }
                var dt = $('<dt></dt>');
                dt.append(img);

                var dl = $('<dl></dl>');
                dl.append(dt);
                var li = $('<li></li>');
                li.append(dl);

                var dd = $("<dd></dd>");
                //$.formatDate(new Date())
                if (comment.SourceCommenterID != null) {
                    dd.html("<span>" + comment.Commenter.Name + "&nbsp;回&nbsp;复&nbsp;" + comment.SourceCommenter.Name + ": </span>" + comment.Text + "&nbsp;&nbsp;&nbsp;&nbsp;(" + renderTime(comment.Time) + ")");
                    dl.append(dd);
                }
                else {
                    dd.html("<span>" + comment.Commenter.Name + ": </span>" + comment.Text + "&nbsp;&nbsp;&nbsp;&nbsp;(" + renderTime(comment.Time) + ")");
                dl.append(dd);
            }

                var a = $("<a ></a>");
                a.click(function () {
                    $('#respond_' + comment.ID).show(); 
                });
                a.css('cursor', 'pointer').html("回复");
                var acronym = $("<acronym></acronym>");
                acronym.append(a);
                li.append(acronym);

                var ol = $("<ol id='respond_" + comment.ID + "' style='display:none;' ></ol>");
                var o_lit = $("<li><textarea id='resp_text_" + comment.ID + "' name='' cols='' rows='4'></textarea></li>");
                var o_lii = $("<li><input id='sub_" + comment.ID + "' type='button' name='' value='' /></li>");
                o_lii.click(function () {
                    var text = $('#resp_text_' + comment.ID).val();
                    if (text.length > 200) {
                        alert("评论描述字数不可超过200字！");
                        $('#resp_text_' + comment.ID).focus();
                        return;
                    }
                    if (text.length == 0) {
                        alert("请输描述信息！");
                        $('#resp_text_' + comment.ID).focus();      
                        return;
                    }

                    var url = '/XmlHttpGate.aspx?cmd=sendRespond&langID=' + g_langID + '&random=' + new Date().toLocaleString() + '&wid=<%=Request["wid"] %>' + '&cid=' + comment.CommenterID;
                    var result = null;
                    var postXml = "<warmup><desc><![CDATA[" + text + "]]></desc></warmup>";
                    jQuery.ajax({
                        url: url,
                        type: 'post',
                        async: false,
                        data: postXml,
                        success: function (r) {
                            if (!r.Result) {
                                alert("请先登录！");
                            }
                            else {
                                alert("回复成功！");
                                $('#resp_text_' + comment.ID).val("");
                                getWarmupComments(0);
                            }
                        },
                        dataType: 'json'
                    });
                    return false;
                });
                

                ol.append(o_lit);
                ol.append(o_lii);

                li.append(ol);
                return li;
                
             }
        }




        //发表评论
        function saveWarmupCommend(warmupId) {
            var text = $('#txtDesc').val();
            if (text.length > 200) {
                alert("评论描述字数不可超过200字！");
                $('#txtDesc').focus();
                return;
            }
            if (text.length == 0) {
                alert("请输描述信息！");
                $('#txtDesc').focus();
                return;
            }

            var url = '/XmlHttpGate.aspx?cmd=sendComm&langID=' + g_langID + '&random=' + new Date().toLocaleString() + "&wid=" + warmupId;

            var result = null;
            var postXml = "<warmup><desc><![CDATA[" + text + "]]></desc></warmup>";
            jQuery.ajax({
                url: url,
                type: 'post',
                async: false,
                data: postXml,
                success: function (r) {
                    if (!r.Result) {
                        alert("请先登录！");
                    }
                    else {
                        alert("评论发表成功！");
                        $('#txtDesc').val("");
                        getWarmupComments(0);
                    }
                },
                dataType: 'json'
            });
            return false;

        }

        function showImage() {
            var imageUrl = $('#w_pop_img').attr('src');
            var url = 'showimage.aspx?img=' + imageUrl;
            window.open(url, '', '');
        }
    </script>
</head>
<body>
    <div id="main">
        <div class="ukContent">
            <div class="ukLeft">
                <div class="uklogo">
                    <a href="home.html">
                        <img src="images/UK_logo.gif" alt="UK NOW" border="0" /></a></div>
                <dl class="ukNav">
                    <dt class="over"><a href="home.html">
                        <img src="images/UK_nav01.gif" alt="首页" border="0" /><img src="images/UK_nav01_1_1.gif"
                            alt="首页" style="display: none" /></a></dt>
                    <dt class="over"><a href="aboutuknow.html">
                        <img src="images/UK_nav02.gif" alt="简介" border="0" /><img src="images/UK_nav02_1_1.gif"
                            alt="简介" style="display: none" /></a></dt>
                    <dt class="over"><a href="eventcalendar.html">
                        <img src="images/uk_nav04.gif" alt="活动安排" border="0" /><img src="images/uk_nav04_1_1.gif"
                            alt="活动安排" style="display: none" /></a></dt>
                    <dt>
                        <img src="images/uk_nav05_1.gif" alt="发现英国元素" /></dt>
                    <dd>
                        <img src="images/UK_nav05_s01_1.gif" alt="" /></dd>
                    <dd class="over">
                        <a href="introduction.html">
                            <img src="images/uk_nav05_s02.gif" alt="" border="0" /><img src="images/uk_nav05_s02_1_1.gif"
                                alt="" style="display: none" /></a></dd>
                    <dd class="over">
                        <a href="winners.html">
                            <img src="images/uk_nav05_s03.gif" alt="" border="0" /><img src="images/uk_nav05_s03_1_1.gif"
                                alt="" style="display: none" /></a></dd>
                    <dt class="over"><a href="sponsors.html">
                        <img src="images/UK_nav03.gif" alt="赞助商" border="0" /><img src="images/UK_nav03_1_1.gif"
                            alt="赞助商" style="display: none" /></a></dt>
                </dl>
                <dl class="ukSearch">
                    <dt>
                        <input name="" type="text" id="SearchValue" value="搜索" onfocus="this.value=''" />
                    </dt>
                    <dd>
                        <a href="#">
                            <img src="images/UK_bor03.gif" alt="" border="0" id="Search" /></a></dd>
                </dl>
                <div id="leftbar_reg" class="leftbar_reg">
                </div>
                <div id="leftbar_talk" class="leftbar_talk">
                </div>
                <div id="leftbar_impression">
                    <a href="vote.html?keepThis=true&TB_iframe=true&height=604&width=576" class="thickbox">
                        <img src="images/leftbar_impression.jpg" alt="" /></a></div>
                <script type="text/javascript">
                    var fo = new FlashObject("swf/leftbar_reg.swf", "Flash", "155", "150", "9", "#ffffff");
                    fo.addParam("menu", "false");
                    fo.addParam("scale", "noscale");
                    fo.addParam("wmode", "transparent");
                    fo.write("leftbar_reg");
                </script>
                <script type="text/javascript">
                    var fo = new FlashObject("swf/leftbar_talk.swf", "Flash", "155", "150", "9", "#ffffff");
                    fo.addParam("menu", "false");
                    fo.addParam("scale", "noscale");
                    fo.addParam("wmode", "transparent");
                    fo.write("leftbar_talk");
                </script>
            </div>
            <div class="ukRight">
                <div class="ukTopLink">
                    <p>
                        中文 <span>|</span> <a href="home.html">EN</a></p>
                    <p class="share">
                        <span>关注我们</span> <a href="javascript:;">
                            <img src="images/UK_icon01_1.gif" id="Img1" alt="" /></a> <a href="javascript:;">
                                <img src="images/UK_icon02_1.gif" alt="" id="Img2" /></a> <a href="javascript:;">
                                    <img src="images/UK_icon03_1.gif" alt="" id="Img3" /></a> <a href="javascript:;">
                                        <img src="images/UK_icon04_1.gif" alt="" id="Img4" /></a> <a href="http://page.renren.com/ibc"
                                            target="_blank">
                                            <img src="images/UK_icon12_1.gif" alt="" id="Img5" /></a></p>
                    <!--
        注释掉的代码是登录前状态，登录后变为一行代码 <acronym><span>Hytal</span>，欢迎来到艺述英国！<a href="#">[退出]</a></acronym>-->
                    <dl id="L_out" style="display:none;" >
                        <dt><a href="register.aspx"><span>注册</span></a></dt>
                        <dd>
                            <a href="login.html?keepThis=true&TB_iframe=true&height=290&width=472" class="thickbox">
                                <span>登录</span></a></dd>
                    </dl>
                    <acronym id="L_in" style="display: none;"><span id="nicName"></span>，欢迎来到艺述英国！<a
                        href="#" onclick="logout();">[退出]</a></acronym>
                </div>
                <div class="detailtop">
                    <dl>
                        <dt>
                        <form id="form1" runat="server">
                            <ul>
                                <li>
                                    <asp:ImageButton ID="top_p" runat="server" 
                                        ImageUrl="~/cn/images/btn_arrow_pre.gif" onclick="top_p_Click" />
                                    </li>
                                <li>
                                   <asp:ImageButton ID="tp_n" runat="server" 
                                        ImageUrl="~/cn/images/btn_arrow_next.gif" onclick="tp_n_Click" />
                                    </li>
                            </ul>
                            </form>
                        </dt>
                        <dd>
                            <%=cuindex %>/<%=count %></dd>
                    </dl>
                    <div class="return">
                        <a href="interactivespace.aspx">
                            <img src="images/btn_return.gif" alt="" /></a></div>
                </div>
                <div class="personal">
                    <div class="perimg">
                        <!--<a href="#TB_inline?height=505&width=745&inlineId=personalimg" class="thickbox">-->
                        <a href="javascript:showImage();">
                            <img id="w_warmImg" width="469" height="469" src="images/def_warmup.JPG" onerror="this.src='/cn/images/def_warmup.JPG'" alt="" /></a>
                        <!--
            弹出图片代码开始
          -->
                        <div id="personalimg">
                            <div class="personalclose">
                                <a href="javascript:;" onclick="tb_remove();">
                                    <img src="images/btn_pop_close.jpg" alt="" /></a></div>
                            <img id="w_pop_img" src="" width="745" height="395" alt="" />
                        </div>
                        <!--
            弹出图片代码结束
          -->
                        <div class="magnifier">
                            <img src="images/icon_magnifier.gif" alt="" /></div>
                    </div>
                    <div class="perintro">
                        <dl>
                            <dt>
                                <img id="w_author_img" width="50" height="50" onerror="this.src='/uploadfiles/image/userhead_img.jpg'"  src="/uploadfiles/image/userhead_img.jpg" alt="" /></dt>
                            <dd id="w_author">
                            </dd>
                        </dl>
                        <div id="pertxt">
                            <!--
              个人简介文字如果文字特别多，会自动出现滚动条，文字较少时滚动条会自动隐藏。
            -->
                            <p id="w_desc">
                            </p>
                        </div>
                        <div class="perfocus">
                            <a href="javascript:" onclick="setVote(<%=Request["wid"] %>);">(<span id="w_comment_votes"></span>)</a></div>
                        <div class="pershare">
                            <p class="share">
                                <span>分享：</span> <a href="javascript:;" onclick="share_sina();">
                            <img src="images/UK_icon01_1.gif" />
                        </a><a href="javascript:;" onclick="share_kaixin();">
                            <img src="images/UK_icon02_1.gif" />
                        </a><a onclick="share_douban();" href="javascript:;">
                            <img src="images/UK_icon03_1.gif" />
                        </a><a onclick="share_qq();" href="javascript:;">
                            <img src="images/UK_icon04_1.gif" />
                        </a><a href="javascript:;" onclick="share_ren();">
                            <img src="images/UK_icon12_1.gif" />
                        </a></p>
                        </div>
                    </div>
                </div>
                <div class="titlecomment">
                    <dl>
                        <dt>
                            <img src="images/title_comment.gif" alt="" /></dt>
                        <!--
            登录后要求登录注册的文字自动隐藏。
          -->
                        <dd id="islogin">
                            请 <a href="login.html?keepThis=true&TB_iframe=true&height=290&width=472" class="thickbox" >登录</a> 或 <a href="register.aspx">注册</a> 添加评论</dd>
                    </dl>
                </div>
                <div class="commentzone">
                    <div class="commentline">
                        <span>Line</span></div>
                    <div class="commentpub">
                        <div class="commentform">
                            <form action="" method="post">
                            <textarea id="txtDesc" name="" cols="" rows="4"></textarea>
                            <input type="button" name="submit" onclick="javascript:saveWarmupCommend('<%=Request["wid"] %>');"
                                value="" />
                            </form>
                        </div>
                        <ul id="ul_w_comments">
                            <%--<li>
              <dl>
                <dt><img src="images/personal_header.jpg" width="30" height="30" alt="" /></dt>
                <dd><span>02Chan：</span>这地方我也去过，现在英国人更加注重生活质量，追求精神享受。(1月25日 20:49)</dd>
              </dl>
              <acronym>| <a href="#">回复</a></acronym>
            </li>
            
              每条评论每个li作循环--%>
                        </ul>
                        <div class="commentpage">
                            <ol id="w_comment_pagesize">
                                <%--<li><a href="#"><img src="images/icon_comment_pre.gif" alt="" /></a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
          	  <li><a href="#"><img src="images/icon_comment_next.gif" alt="" /></a></li>--%>
                            </ol>
                        </div>
                    </div>
                    <div class="commentline">
                        <span>Line</span></div>
                </div>
                <div class="return">
                    <a href="interactivespace.aspx">
                        <img src="images/btn_return.gif" alt="" /></a></div>
                <div class="h56">
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
        <div id="footer">
            <dl>
                <dt><a href="http://www.britishcouncil.org.cn/zh/china.htm" target="_blank">
                    <img src="images/UK_Search_56.gif" alt="" border="0" /></a></dt>
                <dd>
                    <p>
                        <a href="http://www.britishcouncil.org.cn/zh/china.htm" target="_blank">英国大使馆文化教育处</a>
                        | <a href="contactus.html">联系我们</a> | <a href="privacy.html?keepThis=true&TB_iframe=true&height=500&width=542"
                            class="thickbox">隐私政策</a> | <a href="sitemap.html">网站地图</a></p>
                </dd>
            </dl>
        </div>
    </div>
    <script type="text/javascript">
        var iwidth = document.documentElement.clientWidth;
        if (iwidth < 1024) {
            i = 4;
        } else {
            i = ((document.documentElement.clientWidth - 940) / 2) - 50;
        }
        var imgHtml = '';
        var isIE7 = /MSIE 7/.test(navigator.appVersion);
        if (document.compatMode && document.compatMode != 'BackCompat') {
            imgHtml = '<a href="#"><img src="images/icon_return_top.gif" style="POSITION:fixed;' + (isIE7 ? '' : '_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);') + ';right:' + i + 'px;bottom:20px;" alt="" /></a>';
        } else {
            imgHtml = '<a href="#"><img src="images/icon_return_top.gif" style="display:none;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);right:10px;bottom:20px;" alt="" /></a>';
        }
        document.write(imgHtml);
</script>
    <script type="text/javascript">
//<![CDATA[
        var _tag = new WebTrends();
        _tag.fpcdom = ".uknow.org.cn";
        _tag.dcsGetId();
        //]]>>
    </script>
    <script type="text/javascript">
//<![CDATA[
        _tag.WT.sp = "China_uknow_aboutUKNow";
        _tag.dcsCollect();
        //]]>>
    </script>
    <noscript>
        <div>
            <img alt="DCSIMG" id="DCSIMG" width="1" height="1" src="http://statse.webtrendslive.com/dcsozkqgb00000sh0y1unaabw_9e3r/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=8.6.2" /></div>
    </noscript>
</body>
</html>
